import $ from "jquery";
import styles from "./index.module.less";
import { getMovies } from "@/api/movie";
import { createmovieTag } from "@/movie/list";

let container;
/**
 * 初始化函数，负责创建容器
 */
function init() {
  container = $("<div>").addClass(styles.pager).appendTo("#app");
}

init();

/**
 * 根据传入的页码，页容量，总记录数，创建分页区域的标签
 * @param {*} page 页码
 * @param {*} limit 页容量
 * @param {*} total 总记录数
 */
export function createPagers(page, limit, total) {
  container.empty();

  /**
   * @param {*} text辅助函数，负责帮忙创建一个页码标签
   *@param {*} status ，空字符串-普通状态。，disabled-禁用状态，active-选中状态
   */
  function createTag(text, status, targetPage) {
    const span = $(`<span>`).appendTo(container).text(text).addClass(styles[status])
    //只有是普通样式的时候才需要监听点击事件
    if (status === '') {
      span.on('click', async function () {
        //1.重新拿数据
        const resp = await getMovies(targetPage, limit)
        //2.重新生成列表
        createmovieTag(resp.data.movieList)
        //3.重新生成分页的区域
        createPagers(targetPage, limit, resp.data.movieTotal)
      })
    }
  }
  //得到最大的页码数量
  const pageNumber = Math.ceil(total / limit)
  //创建首页标签
  createTag('首页', '', 1)
  //上一页标签
  createTag('上一页', page === 1 ? 'disabled' : '', page - 1)
  //下标签
  createTag('下标签', page === pageNumber ? 'disabled' : '', page + 1)
  const maxCount = 10; // 最大数字页码的数量
  // 1. 计算窗口的起始位置
  let min = Math.floor(page - maxCount / 2); // 也就是 page - 2.5，向下取整
  // 2. 处理左边界
  if (min < 1) {
    min = 1;
  }
  // 3. 计算窗口的结束位置
  let max = min + maxCount - 1; // 可以理解成max-min之间有 maxcount -1 的间隙
  // 4. 处理右边界
  if (max > pageNumber) {
    max = pageNumber;
  }
  // 5. 从 min 循环到 max，创建页码
  for (let i = min; i <= max; i++) {
    createTag(i, i === page ? 'active' : '', i);
  }
  //创建未页标签
  createTag('尾页', '', pageNumber)


}
